<template>
  <div>
    <h1 v-text="num"></h1>
    <button @click="num++">自增</button>
  </div>
</template>

<script setup>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
} from "vue";

console.log("---setup");
const num = ref(100);

// 挂载阶段
onBeforeMount(() => console.log("--开始挂载"));
onMounted(() => console.log("--挂载完成"));

// 更新阶段
onBeforeUpdate(() => console.log("---开始更新"));
onUpdated(() => console.log("---更新完成"));

// 销毁阶段
onBeforeUnmount(() => console.log("---开始销毁"));
onUnmounted(() => console.log("---销毁完成"));

// 与动态组件有关
onActivated(() => console.log("---激活"));
onDeactivated(() => console.log("---休眠"));

</script>

<style lang="scss" scoped>
</style>